<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
  <style>
    .panel {
      width: 900px;
      margin: 10px auto;
    }

    .table img {
      width: 40px;
      height: 40px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="panel panel-primary">
      <!-- Default panel contents -->
      <div class="panel-heading">英雄列表管理</div>
      <div class="panel-body">
        <!-- 存放的搜索区域 -->
        <form action="" autocomplete="off">
          <div class="row">
            <div class="col-lg-3">
              <input type="text" class="form-control" placeholder="输入英雄名称" name="name" />
            </div>
            <div class="col-lg-3">
              <select class="form-control" name="gender">
                <option value="">--选择性别--</option>
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
            <div class="col-lg-3">
              <input name="age" type="text" class="form-control" placeholder="输入年龄" />
            </div>
            <div class="col-lg-3">
              <button type="button" class="btn btn-success" id="search">
                搜索
              </button>
              <button type="button" class="btn btn-warning" id="reset">
                重置
              </button>

            </div>
          </div>
        </form>
      </div>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>编号</th>
            <th>英雄名称</th>
            <th>英雄性别</th>
            <th>年龄</th>
            <th>操作区</th>
          </tr>
        </thead>
        <tbody id="tbody">
          <tr>
            <td>1</td>
            <td>大乔</td>
            <td>女</td>
            <td>18</td>
            <td>
              <button type="button" class="btn btn-danger">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script>

    const list = [
      { id: 1, name: "大乔", gender: "男", age: 18 },
      { id: 2, name: "小乔", gender: "女", age: 20 },
      { id: 3, name: "鲁班", gender: "男", age: 48 },
      { id: 4, name: "后羿", gender: "女", age: 28 },
      { id: 8, name: "廉颇", gender: "男", age: 28 },
    ]

    const tbody = document.querySelector(`tbody`)
    /*   1. 渲染页面的时候，序号根据数据 id来渲染， 同时 删除按钮给的 data-index  也设置为数据 id 
    2. 删除时候，要根据 删除按钮的  id 来找 寻找 数组中的对应对象。 关键点是利用findIndex 返回对象对应的索引号
    3. 根据 findIndex 返回的索引号删除数据，然后重新渲染页面
    */

    //1. 渲染页面的时候，序号根据数据 id来渲染， 同时 删除按钮给的 data-index  也设置为数据 id 
    //先设置一个封装函数render,利用map进行遍历
    function render(arr) {
      const strArr = arr.map((ele, index) => {
        const { id, name, gender, age } = ele
        return `
            <tr>
            <td>${id}</td>
            <td>${name}</td>
            <td>${gender}</td>
            <td>${age}</td>
            <td>
              <button type="button" class="btn btn-danger data-index=${id}">删除</button>
            </td>
            </tr>
           `
      })
      document.querySelector(`#tbody`).innerHTML = strArr.join(``)
    }
    render(list)

    //2. 删除时候，要根据 删除按钮的  id 来找 寻找 数组中的对应对象。 关键点是利用findIndex 返回对象对应的索引号


    tbody.addEventListener(`click`, function (e) {
      const target = e.target
      //如果得到了删除元素
      if (target.classList.contains(`delete-btn`)) {
        //确认是否删除，如果不是则返回
        if (!confirm(`您确定删除吗`)) return
        //如果是，就进行删除，根据删除的索引号删除
        const { index } = target.dataset
        const id = list.findIndex(ele => +index === ele.id)
        list.splice(id, 1)
        render(list)
      }

    })

    const search = document.querySelector(`#search`)
    const name = document.querySelector("[name='name']")
    const gender = document.querySelector("[name='gender']")
    const age = document.querySelector("[name='age']")

    //搜索功能

    search.addEventListener(`click`, function () {
      const name1 = name.value.trim()
      const gender1 = gender.value.trim()
      const age1 = age.value.trim()

      //根据筛选，成立一个新的数组，新的数组有的有值，有的空
      const newArr = list.filter((ele) => {
        const nameValid = name1 === `` || name1 === ele.name
        const genderValid = gender1 === `` || gender1 === ele.gender
        const ageValid = age1 === `` || age1 === ele.age

        return nameValid && genderValid && ageValid
      })
      render (newArr)
    })


    //重置功能
    const reset = document.querySelector(`#reset`)
    reset.addEventListener(`click`, function () {
      name.value=``
      gender.value=``
      age.value=``
      render(list)
    })
   
  </script>
</body>

</html>